<template>
    <section class="homePage-RecentActivities-box">
        <div class="container">
            <h4>近期活动Recent activities</h4>
            <div class="content clearfix">
                <div class="RecommendHouseVideo-box">
                    <a :href="RecommendHouseVideoData.url" target="_blank" v-show="!RecommendHouseVideo_noDataShow" :title="RecommendHouseVideoData.description" :alt="RecommendHouseVideoData.description">
                        <img v-lazy="RecommendHouseVideoData.photo" :title="RecommendHouseVideoData.description" :alt="RecommendHouseVideoData.description" >
                        <div class="font"><i class="iconfont icon-xuanchuanshipin"></i></div>
                        <p>{{isNull0(RecommendHouseVideoData.description)}}</p>
                    </a>
                    <div class="RecommendHouseVideoNoData" v-show="RecommendHouseVideo_noDataShow">
                        <img src="/static/img/houseList-noData.jpg" alt="">
                    </div>
                </div>
                <article>
                    <a-row class="clearfix Recent-activities-box" v-show="!RecentActivities_noDataShow">
                        <a-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" class="aside" v-for="(item, index) in exhibitionListItem" :key="index">
                            <a :href="item.activityUrl" target="_blank" :title="item.activityAddress" :alt="item.activityAddress">
                                <h4>
                                    <i class="iconfont icon-dengpao-shi"></i><span>{{isNull0(item.activityAddress)}}</span>
                                </h4>
                                <p>{{isNull0(item.activityTime)}}</p><em>查看详情&gt;</em>
                            </a>
                        </a-col>
                    </a-row>
                    <h5 v-show="RecentActivities_noDataShow">暂未查询到数据！</h5>
                </article>
                <router-link to="/Exhibition" class="activities-look-back left" title="查看更多华美优胜展会活动" alt="查看更多华美优胜展会活动">活 动<br/>回 顾</router-link>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                RecommendHouseVideoData: {},//左侧的推荐房源视频
                RecommendHouseVideo_noDataShow: false,//左侧的推荐房源视频——没有数据提示信息是否显示

                exhibitionListItem: [], //右侧的近期展会活动列表数据
                RecentActivities_noDataShow: false,//右侧的近期展会活动列表数据——没有数据提示信息是否显示

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取左侧的推荐房源项目视频、右侧的近期展会活动列表数据
            this.getData();
        },
        methods: {
            //获取左侧的推荐房源项目视频、右侧的近期展会活动列表数据
            getData() {
                // 获取左侧的推荐房源项目视频数据
                this.$get('/a/6').then(res => {
                    if (res.status == 0) {
                        this.RecommendHouseVideoData = res.data.list[0];
                        this.RecommendHouseVideo_noDataShow = false;
                    }else{
                        console.log(res.msg);
                        this.RecommendHouseVideo_noDataShow = true;
                    }
                });

                // 获取右侧的近期展会活动列表数据
                this.$get('/expo/list/2/1/5',{
                    sort: true,
                }).then(res => {
                    if (res.status == 0) {
                        this.exhibitionListItem = res.list;
                        this.RecentActivities_noDataShow = false;
                    }else{
                        console.log(res.msg);
                        this.RecentActivities_noDataShow = true;
                    }
                });
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        .homePage-RecentActivities-box{
            padding: 40px 0;
            padding-top: 0px;
            width: 100%;
            >.container{
                >h4{
                    font-size: 18px;
                    font-weight: bold;
                    margin: 30px 0 10px 0;
                }
                >.content{
                    height: 122px;
                    >.RecommendHouseVideo-box{
                        float: left;
                        width: 30%;
                        height: 100%;
                        position: relative;
                        overflow: hidden;
                        background: #000;
                        >a{
                            >img{
                                width: 100%;
                                -webkit-transition: all linear 1s;
                                -moz-transition: all linear 1s;
                                transition: all linear 1s;
                            }
                            > .font {
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top: 0;
                                left: 0;
                                text-align: center;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                > i {
                                    font-size: 30px;
                                    color: #fff;
                                    z-index: 9;
                                    text-align: center;
                                    -webkit-border-radius: 50%;
                                    -moz-border-radius: 50%;
                                    border-radius: 50%;
                                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                    display: inline-block;
                                    opacity: 0;
                                    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                    -o-transition: -o-transform 0.3s, opacity 0.3s;
                                    transition: transform 0.3s, opacity 0.3s;
                                }
                                >i:hover{
                                    text-shadow: 0px 0px 16px #88f5f5;
                                }
                            }
                            >p{
                                width: 100%;
                                position: absolute;
                                bottom: 0;
                                background: rgba(0, 0, 0, 0.4);
                                font-size: 14px;
                                color: #fff;
                                padding: 0 0 0 12px;
                            }
                        }
                        >a:hover{
                            >img{
                                -webkit-transform: scale(1.1, 1.1);
                                -moz-transform: scale(1.1, 1.1);
                                transform: scale(1.1, 1.1);
                                opacity: 0.5;
                                filter: alpha(opacity=50);
                            }
                            > .font {
                                > i {
                                    opacity: 1;
                                    -webkit-transform: scale(1);
                                    -moz-transform: scale(1);
                                    -ms-transform: scale(1);
                                    -o-transform: scale(1);
                                    transform: scale(1);
                                }
                            }
                        }
                        .RecommendHouseVideoNoData{
                            text-align: center;
                            background: rgba(0, 0, 0, 0.75);
                            height: 100%;
                            >img{
                                height: 100%;
                            }
                        }
                    }
                    >article{
                        float: left;
                        height: 100%;
                        width: 58%;
                        >.Recent-activities-box {
                            width: 100%;
                            display: flex;
                            display: -webkit-flex;
                            > .aside {
                                flex: 1;
                                height: 100%;
                                text-align: center;
                                position: relative;
                                padding: 0;
                                overflow: hidden;
                                -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
                                box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
                                >a{
                                    width: 100%;
                                    display: block;
                                    height: 100%;
                                    color: #666;
                                    > h4 {
                                        padding: 32px 0 0 0;
                                        > i {
                                            font-size: 20px;
                                        }
                                        > span {
                                            font-size: 15px;
                                        }
                                    }
                                    > p {
                                        font-size: 16px;
                                    }
                                    > em {
                                        display: inline-block;
                                        width: 100%;
                                        height: 25px;
                                        line-height: 25px;
                                        background: #41a9ed;
                                        font-size: 14px;
                                        color: #fff;
                                        -webkit-transform: translate3d(0, 37px, 0);
                                        transform: translate3d(0, 37px, 0);
                                        opacity: 0;
                                        -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
                                        transition: opacity 0.2s, transform 0.35s;
                                    }
                                }
                            }
                            > .aside:hover {
                                box-shadow: 0 0 12px rgba(136,136,136,.3);
                                border-top: 1px solid #41a9ed;
                                >a{
                                    display: block;
                                    > h4 {
                                        > i {
                                            color: #41a9ed;
                                        }
                                        > span {
                                            color: #41a9ed;
                                        }
                                    }
                                    > em {
                                        opacity: 1;
                                        -webkit-transform: translate3d(0, 0, 0);
                                        transform: translate3d(0, 0, 0);
                                        -webkit-transition-delay: 0.05s;
                                        transition-delay: 0.05s;
                                        -webkit-transition-duration: 0.35s;
                                        transition-duration: 0.35s;
                                    }
                                }
                            }
                            > .aside:nth-of-type(even) {
                                background: #efefef;
                            }
                        }
                        >h5{
                            width: 100%;
                            text-align: center;
                            padding: 0 15px;
                            line-height: 117px;
                        }
                    }
                    >.activities-look-back{
                        width:12%;
                        height: 100%;
                        background: url("/static/img/activities-look-back-bg.jpg") no-repeat center center;
                        background-size: cover;
                        text-align: center;
                        font-size: 20px;
                        color: #fff;
                        padding: 25px 0 0 0;
                        cursor: pointer;
                    }
                }
            }

        }
    }
</style>
